<template>
  <div class="view-window">
    <van-sticky>
      <van-nav-bar>
        <template #left>
          <van-icon
            name="arrow-left"
            color="#333"
            @click="goBack"
            size="15"
          />
        </template>
        <template #right>
          <van-icon
            name="ellipsis"
            color="#333"
            size="20"
          />
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="content">
      <div class="box-title">
        <van-cell
          size="large"
          :border="false"
        >
          <template #title>
            <p class="title">{{ articlesList.data.data.title }}</p>
          </template>
          <template #label>
            <p class="label">{{ `${articlesList.data.data.pubdate} | ${articlesList.data.data.read_count}阅读 | ${articlesList.data.data.comm_count}评论` }}</p>
          </template>
        </van-cell>
        <van-cell
          size="large"
          class="author"
        >
          <template #icon>
            <img
              class="image"
              :src="articlesList.data.data.aut_photo"
            >
          </template>
          <template #title>
            <p>{{ articlesList.data.data.aut_name }}</p>
          </template>
          <template #default>
            <div class="concern">+ 关注</div>
          </template>
        </van-cell>
        <div class="van-hairline--bottom" />
      </div>
      <div>
        <div>
          <p v-html="articlesList.data.data.content" />
          <div class="time">
            <span>发布文章时间: {{ articlesList.data.data.pubdate }}</span>
          </div>
        </div>
        <div class="x" />
        <div>
          <van-cell-group>
            <van-cell
              title="全部评论 ( 51 )"
              value="1 点赞"
            />
          </van-cell-group>
          <div>
            <van-cell-group :border="false">
              <van-cell
                title="游客id"
                :border="false"
              >
                <template #icon>
                  <img
                    class="image"
                    src="http://toutiao.itheima.net/images/user_head.jpg"
                  >
                </template>
                <template #default>
                  <div class="support">
                    <span>0</span>
                    <van-icon
                      name="good-job-o"
                      size="20"
                    />
                  </div>
                </template>
                <template #label>
                  <span class="comments">啊啊啊啊啊啊啊啊</span>
                </template>
              </van-cell>
              <van-cell>
                <template #title>
                  <div class="reply">
                    <span>1 回复</span>
                    <van-icon name="arrow" />
                  </div>
                  <span class="reply-time">22 分钟前</span>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
      </div>
      <van-goods-action>
        <van-search
          v-model="value"
          shape="round"
          left-icon="edit"
          placeholder="抢沙发..."
        />
        <van-goods-action-icon
          icon="chat-o"
          text="评论"
          badge=""
        />
        <van-goods-action-icon
          icon="good-job-o"
          text="点赞"
          badge=""
        />
        <van-goods-action-icon
          icon="like-o"
          text="收藏"
          badge=""
        />
        <van-goods-action-icon
          icon="share-o"
          text="分享"
          badge=""
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'ArticlePage',
  data() {
    return {
      value: '',
    };
  },
  computed: {
    ...mapState('article', [
      'articlesList'
    ])
  },
  methods: {
    ...mapActions('article', [
      'updateArticlesList'
    ]),
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.updateArticlesList(this.$route.query.q);
  },
}
</script>

<style lang="less" scoped>
.content {
  height: calc(100vh - 50px - 46px);
  overflow: auto;
  padding: 10px;
  .title {
    font-size: 23px;
  }
  .label {
    font-size: 8px;
  }

  .author {
    text-align: center;
    position: relative;

    .image {
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      margin: auto 0;
    }
    .concern {
      position: absolute;
      top: 12px;
      right: 5px;
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 30px;
      color: #fff;
      background: #fc6627;
    }
  }

  .time {
    display: flex;
    justify-content: flex-end;

    span {
      padding: 30px;
      font-size: 10px;
      color: #aaabb0;
    }
  }

  .x {
    width: 100%;
    height: 13px;
    background: #f7f8fa;
  }

  .support {
    position: absolute;
    right: 0;
    display: flex;
    width: 35px;
    height: 20px;
    justify-content: space-between
  }

  .image {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
  }

  .comments {
    font-size: 16px;
  }

  .reply {
    text-align: center;
    margin-left: 40px;
    margin-right: 0;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 50px;
    background: #f7f8fa;
  }

  .reply-time {
    position: absolute;
    top: 14px;
    left: 150px;
    color: #999;
    font-size: 12px;
  }

  .input {
    width: 200px;
    height: 30px;
    margin: auto 5px;
    border-radius: 50px;
    background: #f7f8fa;
  }
}

</style>
